<template>
  <ul class="footer-box">
    <li>
      <span class="iconfont icon-liwu"></span><br/>
      <router-link to="/" exact-active-class='acitve'>首页</router-link>
      
    </li>
    <li> <span class="iconfont icon-yejikanban"></span><br/>
      <router-link to="/Category" exact-active-class='acitve'>分类</router-link>
    </li>
    <li> <span class="iconfont icon-dianziqiajuan"></span><br/>
      <router-link to="/ShoppingCar" exact-active-class='acitve'>购物车</router-link>
      </li>
    <li> <span class="iconfont icon-fenxiang"></span><br/>
      <!-- <router-link to="/My" exact-active-class='acitve'>我的</router-link> -->
      <router-link :to="{name:'My'}" exact-active-class='acitve'>我的</router-link>
      </li>
  </ul>
</template>

<script>
export default {
    name:"FooterBar"

}
</script>

<style scoped>
  @import url(../assets/iconfonts/iconfont.css);

.footer-box{
  width: 100%;
  height: 3.125rem;
  /* border:1px solid black; */
  border-top:1px solid gray;
  display: flex;
  justify-content: space-around;
  align-items: center;

}

.footer-box li{
  flex:1;
  /* border:1px solid red; */
  text-align: center;
  height:100%;
  
}

.acitve{
  color:red
}


</style>